<template>
    <div class="songList" v-cloak>
        <div class="right">
            <div class="hidden_top">
                <!-- 各种榜单 -->
                <div class="click_btn" @click="showOrHidden">
                    排行榜详情
                    <i class="upOrDown iconfont icon-xiasanjiao-copy"></i>
                </div>
                <div class="left" v-if="isShow">
                    <ul>
                        <li v-for="(item,index) in rankId" :key="index" @click="getList(index)" :class="{active: addActive==index}">{{item}}</li>
                    </ul>
                </div>
            </div>
             <!--榜单的详情 -->
            <ul>
                <li class="frist_li">
                    <div class="detail_image">
                        <img :src="songList.coverImgUrl" alt="">
                    </div>
                    <div class="detailText">
                        <p>{{songList.name}}</p>
                        <div class="span">
                            <i class="iconfont icon-pinglun">{{songList.commentCount}}</i>
                            <br>
                            <i class="iconfont icon-dianzan_active">{{songList.shareCount}}</i>
                            <br>
                            <i class="iconfont icon-bofang1">{{songList.playCount}}</i>
                        </div>
                        <div class="updateTime">更新时间：{{format(songList.updateTime)}}</div>
                    </div>
                </li>
                <li class="txt" v-for="(item,index) in songList.tracks" :key="index" @click="play(item.id,index)" :class="{active: addActive==index}">
                     <div class="num">
                        {{index+1}}
                    </div>
                    <div class="names">
                        <p class="name">{{item.name}}</p>
                        <span class="name1" v-for="(r,n) in item.ar" :key="n">{{r.name}}</span>
                        <span class="name1">--{{item.name}}</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import axios from "axios";
export default {
    data:function(){
        return{
             rankId:{
                "0": "云音乐新歌榜",
                "1": "云音乐热歌榜",
                "2": "网易原创歌曲榜",
                "3": "云音乐飙升榜",
                "4": "云音乐电音榜",
                "5": "UK排行榜周榜",
                "6": "美国Billboard周榜",
                "7": "KTV嗨榜",
                "8": "iTunes榜",
                "9": "Hit FM Top榜",
                "10": "日本Oricon周榜",
                "11": "韩国Melon排行榜周榜",
                "12": "韩国Mnet排行榜周榜",
                "13": "韩国Melon原声周榜",
                "14": "中国TOP排行榜(港台榜)",
                "15":" 中国TOP排行榜(内地榜)",
                "16": "香港电台中文歌曲龙虎榜",
                "17": "华语金曲榜",
                "18":" 中国嘻哈榜",
                "19": "法国 NRJ EuroHot 30周榜",
                "20": "台湾Hito排行榜",
                "21": "Beatport全球电子舞曲榜",
                "22": "云音乐ACG音乐榜",
                "23": "云音乐嘻哈榜"
            },
            //每首歌信息
            songList:[],
            //控制显示或隐藏
            isShow:true,
            addActive:0
        }
        
    },
    mounted() {
      this.getList();
    },
    methods:{
        getList:function(reId=0){
            this.isShow = !this.isShow;
            var that = this;
            this.addActive = reId;
            axios.get("http://netease.bluej.cn/top/list?timestamp=1503",{
                params:{
                    idx:reId
                }
            }).then(function(res){
                that.songList = res.data.playlist;
                //window.console.log(res)
            });
        },
        play(songid,index){
            this.addActive = index;
            this.$store.commit("change",{
                playState:true,
                id:songid
            });
            this.$parent.$parent.$refs.player.getSong();
        },
        showOrHidden(){
            this.isShow = !this.isShow;
            var upOrDown = document.getElementsByClassName("upOrDown")[0];
            if(this.isShow){
                upOrDown.classList.remove("icon-xiasanjiao-copy");
                upOrDown.classList.add("icon-triangle-down");
            }else{
                upOrDown.classList.remove("icon-triangle-down");
                upOrDown.classList.add("icon-xiasanjiao-copy");
            }
            
        },
        format:function(time){
            var t = new Date(time);
            var year = t.getFullYear();
            var month = (t.getMonth()+1);
            var day = t.getDate();
            if(month<10){
                month = "0"+month;
            }
            if(day<10){
                day = "0"+day;
            }
            return t = year+"/"+month+"/"+day;
        }
    }
}
</script>
<style scoped lang="scss">
    .active{
        color:purple;
    }
    [ v-cloak]{
        display:none;
    }
    *{
        margin:0;
        padding:0;
        list-style: none;
    }
    .songList{
        width:100vw;
        .hidden_top{
            width:100vw;
            .click_btn{
                width:100vw;
                height:10vw;
                line-height: 10vw;
                position:relative;
                text-align:center;
                background:#fbf8f8;
                color:#888;
                border-bottom:1px solid #f1f1f1;
                box-sizing: border-box;
                .upOrDown{
                    width:5vw;
                    position:absolute;
                    top:0;
                    right:30vw;
                    z-index:5;
                }
            }
            .left{
                ul{
                    background:#f1f1fd;
                    li{
                        line-height:32px;
                        font-family: "微软雅黑";
                        font-size:14px;
                        text-indent: 15px;
                        border-bottom:none;
                        color:#666;
                    }
                }
            }
        }
        .right{
            width:100vw;
            ul{
                .frist_li{
                    width:100vw;
                    height: 46vw;
                    overflow: hidden;
                    background:#f6f6f6;
                    .detail_image{
                        width:40vw;
                        float:left;
                        img{
                            width:30vw;
                            display: block;
                            margin:7vw 0 0 5vw;
                            border-radius: 5px;
                        }
                    }
                    .detailText{
                        width:60vw;
                        float:left;
                        p{
                            width:60vw;
                            height:10vw;
                            line-height: 10vw;
                            margin-top:5vw;
                            font-size:20px;
                            color:purple;
                             overflow : hidden;
                            text-overflow : ellipsis;
                            white-space : nowrap;
                        }
                        .span{
                            width:60vw;
                            height:21vw;
                            line-height: 7vw;
                            color:#888;
                            i{
                                float:left;
                                margin-top:0;
                                font-size:12px;
                            }
                        }
                        .updateTime{
                            width:60vw;
                            height:10vw;
                            line-height: 10vw;
                            font-size:16px;
                            color:#888;
                        }
                    }
                }
                .baseTittle{
                    width:100vw;
                    height:10vw;
                    span{
                        float:right;
                        width:25vw;
                        text-align: center;
                    }
                }
                li.txt{
                    width:100%;
                    height:8vh;
                    padding-top:2vw;
                    padding-bottom:2vw;
                    border-bottom:1px solid #f1f1f1;
                    .num{
                        float:left;
                        width:10vw;
                        height:6vh;
                        line-height:6vh;
                        text-align: center;
                        color:#df3436;
                        }
                        .names{
                            float:left;
                            width:90vw;
                            .name{
                            font-size:18px;
                            color:#333;
                            }
                            .name1{
                                display:inline-block;
                                font-size:14px;
                                color:#888;
                            }
                        }
                }
            }
        }
    }
</style>